<template>
  <div class="page">
    <div>
      <h3>测试组件-{{ time }}</h3>
      <button class="bt" @click="handleClick">测试按钮-{{ msg }}</button>
    </div>
    <div>
      <h3>测试内部组件已注册的Store</h3>
      <div>{{ globalInfoStore }}</div>
    </div>
    <div>
      <h3>测试外部项目已注册的Store</h3>
      <div>{{ globalInfo }}</div>
    </div>
    <div>
      <h3>测试所有已注册的Store</h3>
      <div>{{ allStore }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
defineOptions({
  name: 'EButton',
});
const props = withDefaults(
  defineProps<{
    msg?: string;
  }>(),
  {
    msg: 'Hello World',
  }
);
const emits = defineEmits<{
  (e: 'handleClick', msg: string): void;
}>();
let count = 0;

const handleClick = () => {
  globalInfoStore.setGlobalInfo({
    count: ++count,
  });
  setStore('aaaa', {
    isOfflineApp: !globalInfo.isOfflineApp,
  });
  setStore('globalInfo', {
    isOfflineApp: !globalInfo.isOfflineApp,
  });

  emits('handleClick', '测试传值');
};

import { getStore, setStore } from '@/store/index';
const globalInfo = getStore('globalInfo');
const allStore = getStore();

import useGlobalInfo from '@/store/compGlobalInfoStore';
const globalInfoStore = useGlobalInfo();

import { parseTime } from '@/utils/utils';
const time = ref(parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'));
</script>
<style lang="scss" scoped>
@import './style/index.scss';
</style>
